<template>
  <div>练习页面:vuex
    {{ $store.state.message }}
    <div>
      {{ $store.state.message }}
      <div>mapState辅助函数:{{ message }}</div>
      <div>mapGetters辅助函数:姓名:{{ nickName }},余额：{{ money }}</div>
      <div>全局getters属性,姓名:{{ $store.getters.nickName }}，余额：{{ $store.getters.money }}</div>
      <div><button @click="chengeFn">同步改变message的值</button></div>
      <div><button @click="chengeFnSync">异步改变message的值</button></div>
    </div>
    <div>
      {{ $store.state.user.message }}
      <div>模块getters属性,姓名:{{ $store.getters.uName }}，余额：{{ $store.getters.userMoney }}</div>
      <div><button @click="chengeUserFn">同步改变user的message的值</button></div>
      <div><button @click="chengeUserFnSync">异步改变user的message的值</button></div>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
  computed: {
    ...mapState({
      message: state => state.message
    }),
    ...mapGetters(['nickName', 'money'])
  },
  methods: {
    ...mapMutations({
      'newChangeMessage': 'changeMessage'
    }),
    ...mapMutations('user', {
      'newChangeUser': 'changeUser'
    }),
    ...mapActions({
      'newChangeMessageSync': 'changeMessageSync'
    }),
    ...mapActions({
      'newChangeUserSync': 'changeUserSync'
    }),
    chengeFn() {
      // 不要直接修改state的数据
      // 调用mutations的方法修改
      // this.$store.commit('changeMessage')
      // 将当前的时间戳修改为message
      // this.$store.commit('changeMessage', Date.now())
      this.newChangeMessage(Date.now())
    },
    chengeFnSync() {
      // 异步调用actions
      // this.$store.dispatch('changeMessageSync', Date.now())
      this.newChangeMessageSync(Date.now())
    },
    chengeUserFn() {
      // this.$store.commit('user/changeUser', Date.now())
      this.newChangeUser(Date.now())
    },
    chengeUserFnSync() {
      this.$store.dispatch('user/changeUserSync', Date.now())
      this.newChangeUserSync(Date.now())
    }
  }
}
</script>

<style>

</style>
